<template>
    <div>
        <div class="content">
            <div class="static">
                <div class="wrap">我的订单</div>
                
            </div>
            <div class="shop">
                <van-tabs >
                    <van-tab title="全部" background="#ccc">
                         <van-swipe-cell v-for="items in arr" :key="items">
                            <div class="shop_commodity" v-for="item in items" :key="item">
                                <div class="shop_commodity_image">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                </div>
                                <div class="shop_commodity_wrap">
                                    <div class="shop_commodity_wrap_name">
                                        <di class="box">已下单</di>
                                    </div>
                                    <div class="shop_commodity_wrap_desc">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="shop_commodity_wrap_money">
                                        {{item.desc}}
                                    </div>
                                    <div class="shop_commodity_wrap_num">
                                         <div class="yan">￥：{{item.price}}</div>
                                         <div class="num">
                                            ×{{item.num}}
                                         </div>
                                    </div>
                                </div>  
                            </div>
                            <template #right>
                                <van-button square text="删除" type="danger" class="delete-button" />
                            </template>
                         </van-swipe-cell>
 
                    </van-tab>
                    <van-tab title="待付款">
                         <van-swipe-cell v-for="items in arr" :key="items">
                            <div class="shop_commodity" v-for="item in items" :key="item">
                                <div class="shop_commodity_image">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                </div>
                                <div class="shop_commodity_wrap">
                                    <div class="shop_commodity_wrap_name">
                                        <di class="box">已下单</di>
                                    </div>
                                    <div class="shop_commodity_wrap_desc">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="shop_commodity_wrap_money">
                                        {{item.desc}}
                                    </div>
                                    <div class="shop_commodity_wrap_num">
                                         <div class="yan">￥：{{item.price}}</div>
                                         <div class="num">
                                            ×{{item.num}}
                                         </div>
                                    </div>
                                </div>  
                            </div>
                            <template #right>
                                <van-button square text="删除" type="danger" class="delete-button" />
                            </template>
                         </van-swipe-cell>
                    </van-tab>
                    <van-tab title="待收获">
                         <van-swipe-cell v-for="items in arr" :key="items">
                            <div class="shop_commodity" v-for="item in items" :key="item">
                                <div class="shop_commodity_image">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                </div>
                                <div class="shop_commodity_wrap">
                                    <div class="shop_commodity_wrap_name">
                                        <di class="box">已下单</di>
                                    </div>
                                    <div class="shop_commodity_wrap_desc">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="shop_commodity_wrap_money">
                                        {{item.desc}}
                                    </div>
                                    <div class="shop_commodity_wrap_num">
                                         <div class="yan">￥：{{item.price}}</div>
                                         <div class="num">
                                            ×{{item.num}}
                                         </div>
                                    </div>
                                </div>  
                            </div>
                            <template #right>
                                <van-button square text="删除" type="danger" class="delete-button" />
                            </template>
                         </van-swipe-cell>
                    </van-tab>
                    <van-tab title="已完成">
                         <van-swipe-cell v-for="items in arr" :key="items">
                            <div class="shop_commodity" v-for="item in items" :key="item">
                                <div class="shop_commodity_image">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                </div>
                                <div class="shop_commodity_wrap">
                                    <div class="shop_commodity_wrap_name">
                                        <di class="box">已下单</di>
                                    </div>
                                    <div class="shop_commodity_wrap_desc">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="shop_commodity_wrap_money">
                                        {{item.desc}}
                                    </div>
                                    <div class="shop_commodity_wrap_num">
                                         <div class="yan">￥：{{item.price}}</div>
                                         <div class="num">
                                            ×{{item.num}}
                                         </div>
                                    </div>
                                </div>  
                            </div>
                            <template #right>
                                <van-button square text="删除" type="danger" class="delete-button" />
                            </template>
                         </van-swipe-cell>
                    </van-tab>
                    <van-tab title="已取消">
                         <van-swipe-cell v-for="items in arr" :key="items">
                            <div class="shop_commodity" v-for="item in items" :key="item">
                                <div class="shop_commodity_image">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                </div>
                                <div class="shop_commodity_wrap">
                                    <div class="shop_commodity_wrap_name">
                                        <di class="box">已下单</di>
                                    </div>
                                    <div class="shop_commodity_wrap_desc">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="shop_commodity_wrap_money">
                                        {{item.desc}}
                                    </div>
                                    <div class="shop_commodity_wrap_num">
                                         <div class="yan">￥：{{item.price}}</div>
                                         <div class="num">
                                            ×{{item.num}}
                                         </div>
                                    </div>
                                </div>  
                            </div>
                            <template #right>
                                <van-button square text="删除" type="danger" class="delete-button" />
                            </template>
                         </van-swipe-cell>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        
        <Docker />
    </div>
</template>

<script setup>
import Docker from '../../components/Docker.vue';
import {ref}from 'vue'
import {get} from '../../utils/request'
let arr=ref([])
let getorderlist = async()=>{
    let res = await get(`/order?project_id=244`)
    console.log(res);
    res.result.rows.forEach((ele)=>{
        ele.goods_info=JSON.parse(ele.goods_info)
        arr.value.push(ele.goods_info)
    })
    console.log(arr.value);
    
    // res.result.forEach((index)=>{
    //     arr.value[index] = JSON.parse(res[index].goods_info)
    // })
}
getorderlist()

const active = ref(0);
</script>

<style lang="scss" scoped>
.content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0.5rem;
    overflow-y:auto;
}

.static{
    height: 0.6rem;
}
.titler{
    width: 100%;
    height: 0.2rem;
}
.wrap{
    margin-top: 0.11rem;
    margin-left: 1.6rem;
    width: 1.54rem;
    height: 0.22rem;
    font-size: 0.16rem;
    line-height: 0.22rem;
}
.shop{
    background-color: #F5F5F5;
    overflow: hidden;

}

.shop_commodity{
    display: flex;
    margin-top: 0.1rem;
    // margin-bottom: 0.2rem;
    display: flex;
    flex-wrap:wrap;
    width: 100%;
    background: #ffff;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);

    .shop_commodity_image{
        margin-top: 0.02rem;
        width: 1.4rem;
        height: 1.5rem;
        background: #FFFFFF;
        border:0.01rem solid #fff;
        box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);

        img{
            width: 1.4rem;
            height: 90%;
        }
    }

    .shop_commodity_wrap{
        margin-left: 0.1rem;
        width: 1.86rem;
        height: 1.5rem;

        .shop_commodity_wrap_name{
            display: flex;
            margin-top: 0.01rem;
            padding-left: 0.1rem;
            width: 2.05rem;
            height: 0.3rem;
            font-size: 0.16rem;
            .box{
                margin-left: 1.53rem;
                width: 0.5rem;
                height: 0.3rem;
                line-height: 0.3rem;
            }
        }
        .shop_commodity_wrap_desc{
            padding-left: 0.01rem;
            margin-top: 0.1rem;
            width: 2.05rem;
            height: 0.2rem;
            font-size: 0.16rem;
            line-height: 0.2rem;
        }
        .shop_commodity_wrap_money{
            display: flex;
            margin-top: 0.05rem;
            width:2.15rem;
            height: 0.5rem;
            font-size: 0.14rem;
             white-space: wrap;
            text-overflow: ellipsis;
        }
        .shop_commodity_wrap_num{
            margin-top: 0.05rem;
            display: flex;
            justify-content: space-between;
            width: 2.15rem;
            height: 0.3rem;
            .yan{
                padding-left: 0.05rem;
                width: 0.8rem;
                height: 100%;
                font-size: 0.16rem;
                line-height: 0.4rem;
            }
            .num{
                margin-top: 0.1rem;
                width: 0.3rem;
                height: 0.2rem;
                font-size: 0.16rem;
            }
        }
    }

    .shop_commodity_btn{
        display: flex;
        width: 3.68rem;
        height: 0.4rem;
        button{
            margin-left: 0.3rem;
            width: 0.8rem;
            height: 0.4rem;
            border-radius: 0.5rem;
            border: none;
            background-color: #fff;
        }   
    }

}
.delete-button {
  height: 100%;
}
</style>